<template>
  <div class="header">
    <div class="left">
      <span style="font-size: 20px">->{{ state.name }}</span>
    </div>
    <div class="right"><Nav /></div>
  </div>
</template>

<script setup>
import {onMounted,  reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import Nav from '@/components/Nav.vue'
import axios from '@/utils/axios'
import { localRemove, pathMap } from '@/utils'
const router = useRouter()
const route = useRoute
const state = reactive({
  name: '首页'
})
const handleAdd = () => {
  router.push({ path: '/addquestion' })
}
onMounted(() => {
  state.name = pathMap[route.name]
})
router.afterEach((to) => {
  state.name = pathMap[to.name]

})
// router.beforeEach((to)=>{
//   state.name = pathMap[to.name]
// })
</script>

<style scoped>
  .header {
    height: 50px;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
  }
</style>